<template>
    <div class="personal-info-container">
        <el-card>
            <div slot="header" class="personal-info-header">
                个人信息
            </div>
            <div class="personal-info-body">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <div class="personal-info-item">
                            <span class="personal-info-key">用户名：</span>
                            <span class="personal-info-value">{{ username }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="personal-info-item">
                            <span class="personal-info-key">手机号：</span>
                            <span class="personal-info-value">{{ phone }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="personal-info-item">
                            <span class="personal-info-key">QQ号：</span>
                            <span class="personal-info-value">{{ qq }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="personal-info-item">
                            <span class="personal-info-key">微信号：</span>
                            <span class="personal-info-value">{{ wechat }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="personal-info-item">
                            <span class="personal-info-key">注册时间：</span>
                            <span class="personal-info-value">{{ registerTime }}</span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="personal-info-item personal-info-address">
                            <span class="personal-info-key">收货地址：</span>
                            <span class="personal-info-key edit-address">管理收货地址</span>
                            <el-collapse>
                                <el-collapse-item v-for="(address, index) in addresses" :key="index"
                                                  :title="address.consignee">
                                    <div class="address-item">
                                        <p>{{ address.consignee }}</p>
                                        <p>{{ address.consigneePhone }}</p>
                                        <p>{{ address.consigneeProvince }} {{ address.consigneeCity }}
                                            {{ address.consigneeDistrict }}
                                            {{ address.consigneeDetialedAddress }}</p>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>

</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            username: '',
            phone: '',
            qq: '',
            wechat: '',
            registerTime: '',
            addresses: []
        }
    },
    mounted() {
        this.showMessage()
    },
    methods: {
        showMessage() {
            axios({
                methods: "get",
                url: "/userMessages",
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then(res => {
                let data = res.data.data
                this.username = data.username
                this.phone = data.phone
                this.qq = data.qq
                this.wechat = data.wechat
                this.registerTime = data.registerTime
            })
            axios({
                method: "get",
                url: "/addresses",
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then(res => {
                    this.addresses = res.data.data
                    console.log(this.addresses)
                }
            )
        }
    }
}
</script>

<style scoped>
.personal-info-container {
    padding: 20px;
}

.personal-info-header {
    color: #fff;
    background-color: #3381cc;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 24px;
    border-radius: 4px 4px 0 0;
}

.personal-info-body {
    padding: 20px;
}

.personal-info-item {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 2;
}

.personal-info-item .personal-info-key {
    color: #999;
    margin-right: 10px;
}

.personal-info-item .personal-info-value {
    color: #333;
    word-break: break-all;
}

.personal-info-address {
    margin-top: 20px;
}

.address-item {
    line-height: 2;
    font-size: 14px;
}

.edit-address {
    float: right;
}

.edit-address:hover {
    color: #256fc3;
    cursor: pointer;
}
</style>